<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
    }

    .page {
        height: 100%;
        width: 100%;
        font-size: 126px;
        display: -webkit-box;
        /*Safari*/
        display: -moz-box;
        /*Firefox*/
        display: -ms-flexbox;
        /*IE*/
        display: -webkit-flex;
        /*Chrome*/
        display: flex;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    #mao {
        position: fixed;
        right: 0;
        bottom: 0;
    }
</style>

<body>

    <div class="page" id="item-1">Prat 1</div>
    <div class="page" id="item-2">Prat 2</div>
    <div class="page" id="item-3">Prat 3</div>
    <div class="page" id="item-4">Prat 4</div>
    <div class="page" id="item-5">Prat 5</div>
    <div class="page" id="item-6">Prat 6</div>
    <div class="page" id="item-7">Prat 7</div>

    <script type="text/javascript">
    let pageIndex=0
        var scrollFunc = function (e) {
            ee = e || window.event;
            var t1 = document.getElementById("wheelDelta");
            var t2 = document.getElementById("detail");
            var y = document.documentElement.scrollTop || document.body.scrollTop;
            var fullheight = document.body.offsetHeight;
            //console.log(fullheight)
            if (e.wheelDelta) { //IE/Opera/Chrome 
                var a = e.wheelDelta;//向上为120，向下为-120
                if (a > 0) {//向上
                    pageIndex++	
                    console.log('向上')
                    //document.body.scrollTop -= fullheight / 2;
                }
                if (a < 0) {//向下
                    //document.body.scrollTop += fullheight / 2;
                    console.log('向下')
                    pageIndex--
                }
            } else if (e.detail) { //Firefox 
                var a = e.detail;//向上为-3，向下为3
                if (a < 0) {//向上	
                    document.documentElement.scrollTop -= fullheight / 2;
                }
                if (a > 0) {//向下
                    document.documentElement.scrollTop += fullheight / 2;
                }
            }
            $('.page').eq(pageIndex).animate({
                scrollTop: $(this).offset().top,
            },500)
        }

        /*注册事件*/
        if (document.addEventListener) {
            document.addEventListener('DOMMouseScroll', scrollFunc, false);
        } //W3C 
        window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome
    </script>
</body>

</html>